<template>
    <div class="workWapper">
        <div class="check" v-show="checkExisten">
        </div>
        <div class="itemList">
            <div v-for="(item,name) in itemMessage"  :class="listTitle[name].itemClass">
                {{listTitle[name].function(item)}}
            </div>
        </div>
        <div class="operate">
            <div>  
                <a-button type="primary" v-if= "itemMessage.statu!= 3" @click="workFinish()" :disabled="itemMessage.statu!=0">finish</a-button>
            </div>
            <div>
                <a-button type="default" @click="workDelay()" :disabled="itemMessage.statu==2">delay</a-button>
            </div>
            <div>
                <a-button type="danger" @click="workDelete()" :disabled="itemMessage.statu==2">delete</a-button>
            </div>
        </div>
    </div>
</template>

<script>
import { postAction } from '@/utils/axios';

// list 下 item 的渲染 ， 渲染titleList下每一项 ， 具体数据在itemMessage
export default {
    mounted(){
    },
    name: "listItem",
    props: {
        itemMessage: {
            default:{},
            type:Object
        },
        listTitle:{
            default:{},
            type:Object
        },
    },
    data(){
        return{
            checkExisten:true,
        }
    },
    computed: {
        
    },
    methods:{
        //time对象
        showTime(val){
            // let date = new Date(val)
            // return `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`
            return val
        },

        // 按钮列表对应事件
        async workFinish(){
            let endDate = new Date().getTime();
            this.itemMessage.endTime= endDate;
            this.itemMessage.statu= 1;
            await postAction("http://localhost:8083/mainPage/workChange",{
                ...this.itemMessage
            })
        },
        workDelay(){
            // this.itemMessage.endTime.value = endDate;
        },
        async workDelete(){
            this.itemMessage.statu = 2;
            await postAction("http://localhost:8083/mainPage/workChange",{
                ...this.itemMessage
            })
        }
    }
}
</script>

<style lang="less">
.workWapper {
    display: flex;
    justify-content: space-between;
    div {
        height: 40px;
        line-height: 40px;
    }

    .itemList{
        display: flex;
        width: 1100px;
        .item , .shortItem , .longItem{
            // overflow-x: auto;
        }
        .item {
            text-align: center;
            width: 200px;
        }
        .shortItem{
            text-align: center;
            width: 100px;
        }
        .longItem{
            text-align: center;
            width: 300px;
        }
    }

    .operate {
        div {
            width: 80px;
        }
        width: 300px;
        display: flex;
    }
}
</style>
